<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item>
                <div slot="label">
                    <a-button icon="plus" size="small" style="margin-left: 10px;" @click="form.navigations.tableData.push({...oriTableData})">新增导航</a-button>
                </div>
                <a-table
                    :columns="form.navigations.tableColumns"
                    :data-source="form.navigations.tableData"
                    :rowKey="(record,index) => index"
                    :pagination="false"
                    :locale="{emptyText: '暂无导航'}"
                >
                    <template slot="_index" slot-scope="text, item, index">{{ index - 0 + 1 }}</template>
                    <template slot="_title" slot-scope="text, item, index">
                        <a-input v-model="item.title" placeholder="请输入导航标题"></a-input>
                    </template>

                    <template slot="types" slot-scope="text, item, index">
                        <a-select v-model="item.type" @change="onTypeChange(index)">
                            <a-select-option
                                v-for="(v, k) in form.options.navigationTypes"
                                :key="k"
                                :value="v.type"
                            >{{ v.title }}</a-select-option>
                        </a-select>
                    </template>

                    <template slot="_value" slot-scope="text, item, index">
                        <a-input
                            v-model="item.value"
                            :disabled="!form.options.navigationTypes.find(v => v.type == item.type).allowInput"
                            :addon-before="calcPrefix(item)"
                            :placeholder="calcPlaceholder(item)"
                        />
                    </template>

                    <template slot="target" slot-scope="text, item, index">
                        <a-select v-model="item.target">
                            <a-select-option
                                v-for="(v, k) in form.options.navigationTargets"
                                :key="k"
                                :value="v.target"
                            >{{ v.title }}</a-select-option>
                        </a-select>
                    </template>

                    <template slot="extValueTitle">
                        <div>附加数值</div>
                        <div style="font-size: 13px; color: gray;">通常会提供给主题使用</div>
                    </template>
                    <template slot="extValue" slot-scope="text, item, index">
                        <a-input v-model="item.extValue" type="textarea" :autosize="{minRows: 1}"/>
                    </template>

                    <template slot="methods" slot-scope="text, item, index">
                        <a-button type="danger" icon="delete" @click="form.navigations.tableData.splice(index, 1)">删除</a-button>
                    </template>
                </a-table>
            </a-form-model-item>

            <a-form-model-item>
                <a-button type="primary" size="large" icon="save" @click="saveSetting">保存设置</a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
import { getSetting, setSetting } from '../../../api/setting'
export default {
    name: 'NavSetting',
    data() {return {
        oriTableData: {
            index: '1',
            type: 'blog',   // blog | page | url
            title: '',
            value: '',
            target: 'thispage', // thispage | newpage
            extValue: '{"icon": "dashboard"}'
        },
        form: {
            navigations: {
                tableColumns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        key: 'index',
                        scopedSlots: { customRender: '_index' },
                        width: 80
                    },
                    {
                        title: '标题',
                        dataIndex: 'title',
                        key: 'title',
                        scopedSlots: { customRender: '_title' },
                        width: 200,
                    },
                    {
                        title: '方式',
                        dataIndex: 'type',
                        key: 'type',
                        scopedSlots: { customRender: 'types' },
                        width: 150,
                    },
                    {
                        title: '值',
                        dataIndex: 'value',
                        key: 'value',
                        scopedSlots: { customRender: '_value' },
                        width: 400,
                    },
                    {
                        title: '目标',
                        dataIndex: 'target',
                        key: 'target',
                        scopedSlots: { customRender: 'target' },
                        width: 150,
                    },
                    {
                        dataIndex: 'extValue',
                        key: 'extValue',
                        slots: { title: 'extValueTitle' },
                        scopedSlots: { customRender: 'extValue' },
                        width: 200
                    },
                    {
                        title: '操作',
                        dataIndex: 'methods',
                        key: 'methods',
                        scopedSlots: { customRender: 'methods' },
                        width: 100
                    }
                ],
                tableData: []
            },
            options: {
                navigationTypes: [
                    {
                        title: '跳转到博文',
                        type: 'blog',
                        prefix: window.location.href.split('#')[0].replace('admin', '') + 'post/',
                        placeholder: '文章 id 或 url',
                        allowInput: true
                    },
                    {
                        title: '跳转到页面',
                        type: 'page',
                        prefix: window.location.href.split('#')[0].replace('admin', '') + 'p/',
                        placeholder: '页面 url',
                        allowInput: true
                    },
                    {
                        title: '博客首页',
                        type: 'homepage',
                        prefix: window.location.href.split('#')[0].replace('admin', ''),
                        placeholder: '',
                        allowInput: false
                    },
                    {
                        title: '博客目录页',
                        type: 'archive',
                        prefix: window.location.href.split('#')[0].replace('admin', '') + 'archive',
                        placeholder: '',
                        allowInput: false
                    },
                    {
                        title: '博客分类页',
                        type: 'category',
                        prefix: window.location.href.split('#')[0].replace('admin', '') + 'category',
                        placeholder: '',
                        allowInput: false
                    },
                    {
                        title: '搜索页',
                        type: 'search',
                        prefix: window.location.href.split('#')[0].replace('admin', '') + 'search',
                        placeholder: '',
                        allowInput: false
                    },
                    {
                        title: '跳转到 url',
                        type: 'url',
                        prefix: '',
                        placeholder: '完整 url',
                        allowInput: true
                    }
                ],
                navigationTargets: [
                    {
                        title: '当前页面打开',
                        target: 'thispage'
                    },
                    {
                        title: '新页面打开',
                        target: 'newpage'
                    },
                ]
            }
        }
    }},
    mounted() {
        this.initSetting()
    },
    methods: {
        onTypeChange(index) {
            this.form.navigations.tableData[index].value = ''
        },
        saveSetting() {
            setSetting({setting: [{
                type: 'nav',
                value: JSON.stringify(this.form.navigations.tableData.map((v, k) => {
                    v.prefix = this.calcPrefix(v) || this.calcPlaceholder(v)
                    v.order = k
                    return v
                }))
            }]}).then(res => {
                this.$message.success('保存成功')
            }).catch(e => {
                this.$message.error(e.msg || '')
            })
        },
        initSetting() {
            getSetting({
                types: 'nav'
            }).then(res => {
                const navString = res.data.find(v => v.type == 'nav') && res.data.find(v => v.type == 'nav').value
                const navArr = navString ? JSON.parse(navString) : []
                this.form.navigations.tableData =  navArr
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '暂未配置')
            })
        },
        calcPrefix(item) {
            return this.form.options.navigationTypes.find(v => v.type == item.type).allowInput ?
                this.form.options.navigationTypes.find(v => v.type == item.type).prefix : 
                ''
        },
        calcPlaceholder(item) {
            return this.form.options.navigationTypes.find(v => v.type == item.type).allowInput ?
                this.form.options.navigationTypes.find(v => v.type == item.type).placeholder :
                this.form.options.navigationTypes.find(v => v.type == item.type).prefix
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
